<template>
  <div class="chart-page">
    <div class="chart-page-left">
      <CustomerStatistics class="chart-page-item" style="margin-right: 16px;" />
      <CustomerAdd class="chart-page-item" style="margin-right: 8px;" />
      <CustomerChurn class="chart-page-item" style="margin-right: 16px; margin-top: 16px;" />
      <CustomerConsultation class="chart-page-item" style="margin-right: 8px; margin-top: 16px;" />
    </div>
    <CustomerCooperation class="chart-page-item is-right" />
</div>
</template>

<script setup lang="ts">
import CustomerStatistics from './components/CustomerStatistics.vue'
import CustomerCooperation from './components/CustomerCooperation.vue'
import CustomerAdd from './components/CustomerAdd.vue'
import CustomerChurn from './components/CustomerChurn.vue'
import CustomerConsultation from './components/CustomerConsultation.vue'
</script>

<style scoped lang="scss">
.chart-page {
  width: 100%;
  display: flex;
  align-items: stretch;
  &-left {
    width: 66.666%;
    display: flex;
    flex-wrap: wrap;
  }
  &-item {
    background: var(--el-color-white);
    border-radius: 4px;
    width: calc(50% - 12px);
    &.is-right {
      width: 33.333%;
      margin-left: 8px;
    }
  }
}
</style>
